<template>
  <el-form :model="models" :rules="rules" ref="qmGenForm" label-width="100px" class="qm-gen-form">
    <el-row>
      <el-col :span="24">
        <el-form-item label="上级工作台" prop="model.parentId">
          <treeselect
            v-model="models.model.parentId"
            :options="workbenchData"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="选择上级工作台"
            noChildrenText="没有了"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="名称" prop="model.name">
          <el-input v-model="models.model.name" placeholder="请输入名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="编码" prop="model.code">
          <el-input v-model="models.model.code" placeholder="请输入编码" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="排序" prop="model.sort">
          <el-input v-model="models.model.sort" placeholder="请输入排序" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否启用" prop="model.isEnabled">
          <el-select v-model="models.model.isEnabled" clearable>
            <el-option
              v-for="item in enabledTypeOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="打开方式" prop="model.openType">
          <el-select v-model="models.model.openType" clearable>
            <el-option
              v-for="item in openTypeOptions"
              :key="item"
              :label="item"
              :value="item"
              placeholder="请选择打开方式"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="图标" prop="model.icon">
          <el-input v-model="models.model.icon" placeholder="请输入图标" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="弹窗宽度" prop="model.width">
          <el-input v-model="models.model.width" placeholder="请输入弹窗宽度(如：100px或100%)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="弹窗高度" prop="model.height">
          <el-input v-model="models.model.height" placeholder="请输入弹窗高度度(如：100px或100%)" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="打开链接" prop="model.url">
          <el-input v-model="models.model.url" placeholder="请输入打开链接" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="图片名称" prop="model.image">
          <el-input v-model="models.model.image" placeholder="请输入图片名称" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="授权角色" prop="roles">
          <el-select v-model="roles" multiple clearable filterable>
            <el-option
              v-for="item in controlData.roleOptions"
              :key="item.roleId"
              :label="item.name"
              :value="item.roleId"
              placeholder="请选择授权角色"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="model.memo">
          <el-input type="textarea" :rows="2" v-model="models.model.memo" placeholder="备注" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "operation",
  props: {
    models: Object,
    controlData: Object,
    openTypeOptions: {
      type: Array,
      default: [],
    },
    enabledTypeOptions: {
      type: Array,
      default: [],
    },
    handleTree: {
      type: Function,
      required: true,
    },
  },
  components: {
    Treeselect,
  },
  data() {
    return {
      roles: [],
      workbenchData: [],
      rules: {
        "model.name": [
          {
            required: true,
            message: "请输入控制台名称",
            trigger: "blur",
          },
        ],
        "model.code": [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur",
          },
        ],
        "model.url": [
          {
            required: true,
            message: "请输入打开链接",
            trigger: "blur",
          },
        ],
        "model.sort": [
          {
            required: true,
            message: "请输入排序",
            trigger: "blur",
          },
        ],
        "model.openType": [
          {
            required: true,
            message: "请选择打开方式",
            trigger: "change",
          },
        ],
        "model.isEnabled": [
          {
            required: true,
            message: "请选择是否启用",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    roles(roleIds) {
      this.setRolesParam(roleIds);
    },
  },
  created() {
    this.workbenchData = this.handleTree(
      this.controlData.workbenchData,
      "workbenchId"
    );
    let roles = this.controlData.roles;
    roles ? (this.roles = roles) : (this.roles = []);
  },
  methods: {
    normalizer(node) {
      return {
        id: node.workbenchId,
        label: node.name,
        children: node.children,
      };
    },
    setRolesParam(roleIds) {
      let roleOptions = this.controlData.roleOptions;
      let roles = [];
      for (let i = 0; i < roleIds.length; i++) {
        let findRole = roleOptions.find((item) => {
          return item.roleId === roleIds[i];
        });
        findRole ? roles.push(findRole) : null;
      }
      this.models.roles = roles;
    },
  },
};
</script>

<style scoped>
</style>